<template>
	<view class="home customTitleBar" :style="{paddingTop: statusBarHeight}">
		<view class="custom-status-bar" :style="{backgroundColor: customTitleBarBg,height:statusBarHeight}"></view>
		<view class="custom-nav-bar tabs-bar" :style="{top:statusBarHeight,backgroundColor: customTitleBarBg,}">
			<text class="tabs-item" :class="{'selected':index == tabsCurrent}" v-for="(item, index) in tabsList" :key="index">{{item.name}}</text>
		</view>
		<view class="search-bar">
			<view class="search-form" @click="toSearch">
				<input type="text" placeholder="搜索关键字查询" v-model="searchInput" confirm-type="search" @confirm="">
				<view class="btn-clear" @click.stop="clearInput" v-show="searchInput !=''">清除</view>
			</view>
		</view>
		<view class="nav">
			<view class="nav-item" @click="toHundredFamilySurnames">
				<view class="content">
					<view class="title">百家姓</view>
					<view class="caption">查看相关姓氏</view>
				</view>
				<view class="icon"><image src="/static/img/home_nav_icon_01.png"></image></view>
			</view>
			<view class="nav-item" @click="toCase">
				<view class="content">
					<view class="title">病例</view>
					<view class="caption">肿瘤心脑血管病案例</view>
				</view>
				<view class="icon"><image src="/static/img/home_nav_icon_02.png"></image></view>
			</view>
			<view class="nav-item" @click="toPaper">
				<view class="content">
					<view class="title">论文</view>
					<view class="caption">查看权威论文</view>
				</view>
				<view class="icon"><image src="/static/img/home_nav_icon_03.png"></image></view>
			</view>
			<view class="nav-item" @click="toSurnameOrigin">
				<view class="content">
					<view class="title">姓氏来源</view>
					<view class="caption">查看姓氏来源</view>
				</view>
				<view class="icon"><image src="/static/img/home_nav_icon_04.png"></image></view>
			</view>
		</view>
		<view class="traits">
			<view class="traits-item" @click="toTraits(0)">
				<view class="title">O性状</view>
				<view class="btn-view" >立即查看</view>
			</view>
			<view class="traits-item" @click="toTraits(1)">
				<view class="title">A性状</view>
				<view class="btn-view" >立即查看</view>
			</view>
			<view class="traits-item" @click="toTraits(2)">
				<view class="title">B性状</view>
				<view class="btn-view" >立即查看</view>
			</view>
			<view class="traits-item"  @click="toTraits(3)">
				<view class="title">AB性状</view>
				<view class="btn-view">立即查看</view>
			</view>
		</view>
		<view class="footer-fixed-btn" @click="toWriteMaterial">肿瘤预测查询</view>
		<!-- 底部导航s -->
		<view class="menu-bar">
			<view class="menu-bar-item selected" @click="toHome"><view class="icon icon-home"></view><text>首页</text></view>
			<view class="menu-bar-item" @click="toPersonalCenter"><view class="icon icon-me"></view><text>我的</text></view>
		</view>
		<!-- 底部导航s -->
	</view>
</template>
<script>
	let that=this;
	// 引入配置
	import config from '@/common/config'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				customTitleBarBg: 'rgba(255,255,255,0)',
				statusBarHeight: statusBarHeight,
				tabsList:[
					{
						name: '首页'
					}
				],
				tabsCurrent: 0,
				searchInput: '',
			}
		},
		onPageScroll:function(e){  
      this.customTitleBarBg = 'rgba(255,255,255,'+e.scrollTop / 60+')'; 
    },
		onLoad(option) {
			that=this;
			
		},
		methods: {
			// tabsChange(index) {
			// 	this.tabsCurrent = index;
			// },
			
			clearInput() {
				this.searchInput = '';
			},
			toTraits(index) {
				uni.navigateTo({
					url: '../traits/traits?id=' + index,
				});
			},
		
			toSearch() {
				uni.navigateTo({
					url: '../search/search',
				});
			},
			toHundredFamilySurnames() {
				uni.navigateTo({
					url: '../hundredFamilySurnames/hundredFamilySurnames',
				});
			},
			toCase() {
				uni.navigateTo({
					url: '../case/case',
				});
			},
			toPaper() {
				uni.navigateTo({
					url: '../paper/paper',
				});
			},
			toSurnameOrigin() {
				uni.navigateTo({
					url: '../surnameOrigin/surnameOrigin',
				});
			},
			toHome() {
				uni.redirectTo({
					url: '../index/index',
				});
			},
			toWriteMaterial() {
					let openIdtoken =uni.getStorageSync(config.openIdToken);
				uni.navigateTo({
					url: '../writeMaterial/writeMaterial',
				});
			},
			toPersonalCenter() {
				console.log(config.openIdToken)
			//let openIdtoken =uni.getStorageSync(config.openIdToken);
		/* 	if(null==openIdtoken||Object.keys(openIdtoken).length === 0||this.openIdtoken==''){
				this.login();
			}else{
				//先验证 this.openIdToken 的合法性
				let req = {'openIdtoken':this.openIdtoken};
				this.$u.api.checkopenIdtoken(req).then(res => {
					  	console.log(res);
						if(res.code!=200){
							that.login();
							return;
						}	
						
					  })
			} */
				uni.redirectTo({
					url: '../personalCenter/personalCenter',
				}); 
			},
			
		}
	}
</script>

<style scoped>
</style>
<style>
	page{min-height: 100%;background:#fff url(~@/static/img/home_bg.png) no-repeat 0 0;background-size: 750rpx 931rpx;}
</style>
